
<!-- BEGIN:main -->




    <script type="text/javascript">


    // array of property     
    var arrayProperty = [];
    var jsonArrayProperty = [];

            <!-- BEGIN:push_array_property -->
            jsonArrayProperty = {ARRAY_PROPERTY};
<!-- END:push_array_property -->



            $(function() {

                if (jsonArrayProperty.length > 0) {


            for (var i = 0; i < jsonArrayProperty.length; i++) {
                // property ID
                propertyID = jsonArrayProperty[i].propertyID;
                // property name 
                propertyName = jsonArrayProperty[i].propertyName;
                // property value;
                propertyValue = jsonArrayProperty[i].value;
                // add each property value to property array
                arrayProperty.push(propertyID + ":" + propertyValue);
                var propertyBar = $('<div class="d_border_radius5 d_property" id="' + propertyID + ":" + propertyValue + '" >' + propertyName + ': ' + propertyValue + '<div style="margin-left:3px; float:right; cursor: pointer;" class="removeProperty"><img src="./template/default/images/delete.png"/></div></div>');
                propertyBar.appendTo('#propertyList');
            }
                }


        $.datepicker.setDefaults($.datepicker.regional[ "vi" ]);

        $("#txtModifiedDate").datepicker({
            changeMonth: true,
            changeYear: true
        });




                // add a new property
                $('#btAddProperty').click(function() {


                    var propertyID = $('#slProperties').val();
                    var property = $('#slProperties :selected').text();
                    var propertyValue = $('#txtPropertyValue').val();

                    // if property value is valid
                    if (propertyValue != '' && propertyValue.trim() != 'Nhập giá trị') {

                        // if new property not exist in array then add to array
                        if ($.inArray(propertyID + ":" + propertyValue, arrayProperty) == -1) {

                            arrayProperty.push(propertyID + ":" + propertyValue);
                            var propertyBar = $('<div class="d_border_radius5 d_property" id="' + propertyID + ":" + propertyValue + '" >' + property + ': ' + propertyValue + '<div style="margin-left:3px; float:right; cursor: pointer;" class="removeProperty"><img src="./template/default/images/delete.png"/></div></div>');
                            propertyBar.appendTo('#propertyList');
                            $('#txtPropertyValue').val('');
                            $('#txtPropertyValue').focus();
                        }
                    }
                });



                // clear all property
                $('#btClearProperty').click(function() {
                    $('#propertyList').empty();
                    // empty array of property
                    arrayProperty = [];
                });
                // remove a property
                $('.removeProperty').live('click', function() {

                    // div contain key, name and value of property
                    var div = $(this).parent();
                    // key and value
                    var keyValue = div.attr('id');
                    // position of property to remove
                    var index = arrayProperty.indexOf(keyValue);
                    // if exitst property in array then remove
                    if (index > -1) {
                        // remove 1 property at index position
                        arrayProperty.splice(index, 1);
                    }

                    div.remove();
                });

            });



    function submitForm(ac)
    {
        var code = $('#txtCode');
        var name = $('#txtName');
        var price = $('#txtPrice');
        var categoryID = $('#slCategoryID');
        var image = $('#txtImage');

        var alias = $('#txtAlias');

        var hasError = validateEmptyValue(new Array(code, name, price, categoryID, image));

        if (hasError) {
            alert('Vui lòng điền đầy đủ thông tin');
        } else {
            if (alias.val() == '') {
                alias.val(name.val());
            }


            var form = document.phpForm;
            form.hdAction.value = ac;
            form.hdProperty.value = arrayProperty.toString();
            form.submit();
        }
    }









    // popup a window to choose image file
    function BrowseServer() {
        var finder = new CKFinder();
        finder.BasePath = '../blugin/ckeditor3.6.4/ckfinder/';
        finder.startupPath = "Images:/images/";
        finder.SelectFunction = SetFileField;
        finder.Popup();
    }


    // hàm gán giá trị chọn file trên máy chủ vào trường image
    function SetFileField(fileUrl) {
        document.getElementById('txtImage').value = fileUrl;
        document.getElementById('hdImage').value = fileUrl;
    }


</script>




<div id="toolbar-box">
    <div class="d_divide5"></div>
    <div class="toolbar" id="toolbar">
        <table class="toolbar">
            <tr>
                <td class="button" id="toolbar-save">
                    <a href="javascript:void()" onclick="submitForm('editAndExit')" class="toolbar">
                        <span class="icon-32-save" title="Lưu"></span>
                        Lưu & Đóng
                    </a>
                </td>

                <td class="button" id="toolbar-apply">
                    <a href="javascript:void()" onclick="submitForm('edit')" class="toolbar">
                        <span class="icon-32-apply" title="Lưu"></span>
                        Lưu
                    </a>
                </td>

                <td class="button" id="toolbar-cancel">
                    <a href=".?com=com_item&view=item&task=view" class="toolbar">
                        <span class="icon-32-cancel" title="Hủy"></span>
                        Hủy
                    </a>
                </td>												
            </tr>
        </table>
    </div>

    <div class="header icon_48_item_edit">Sản phẩm: <small><small>[ Cập nhật ]</small></small></div>

    <div class="d_divide5"></div>
</div>


<div class="d_divide10"></div>
<div class="d_clear"></div>

<div id="element-box">


    <form method="post" name="phpForm">

        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td valign="top">     

                    <!--left column-->
                    <div style="width: 50%; float:left;">
                        <fieldset>
                            <legend>Thông tin cơ bản</legend>

                            <div class="d_divide2"></div>

                            <!--code-->
                            <div>
                                <label for="txtCode" class="d_label">Mã sản phẩm: <b style="color: red;">*</b></label>
                                <input class="d_text_input" style="width: 330px; " type="text" name="txtCode" id="txtCode" maxlength="255" value="{ITEM_CODE}" title="Mã sản phẩm" />
                            </div>

                            <div class="d_divide2"></div>

                            <!--item name-->
                            <div>
                                <label for="txtName" class="d_label">Tên sản phẩm: <b style="color:red">*</b></label>
                                <input  class="d_text_input" type="text" name="txtName" id="txtName" style="width: 330px; " maxlength="255" value="{ITEM_NAME}" title="Tên sản phẩm" />
                            </div>

                            <div class="d_divide2"></div>

                            <!--price-->
                            <div>
                                <div for="txtPrice" class="d_label">Giá: <b style="color: red;">*</b> </div>
                                <input class="d_text_input" onkeypress="return keypress(event);" type="text" name="txtPrice" id="txtPrice" style="width: 330px; " maxlength="255" value="{ITEM_PRICE}" title="Giá" />                                      						
                            </div>

                            <div class="d_divide2"></div>

                            <!--category list-->
                            <div>
                                <label for="slCategoryID" class="d_label">Nhóm sản phẩm: <b style="color: red;">*</b></label>
                                <select class="d_text_input" size="1" style="width: 330px;" name="slCategoryID" id="slCategoryID">
                                    <option value="0" selected>-- Chọn nhóm sản phẩm --</option>
                                    <!-- BEGIN:category_list -->
                                    <OPTION {SELECTED_CATEGORY} value={CATEGORY_ID}>{CATEGORY_TITLE}</OPTION>                                            
                                    <!-- END:category_list -->
                                </select>
                            </div>

                            <div class="d_divide2"></div>

                            <!--image-->
                            <div>
                                <label for="" class="d_label">Ảnh đại diện: <b style="color: red;">*</b></label>

                                <input class="d_text_input" style="background: #ffffff; " type="text" id="txtImage" name="txtImage" value="{ITEM_IMAGE}" disabled="disabled" size="45" />

                                <input class="d_button" type="button" onClick="javascript:BrowseServer();" value="Chọn" />

                                <input type="hidden" id="hdImage" name="hdImage" value="{ITEM_IMAGE}" />
                            </div>


                            <div class="d_divide2"></div>

                            <!--alias-->
                            <div>
                                <label for="txtAlias" class="d_label">Alias:</label>
                                <input class="d_text_input" type="text" name="txtAlias" id="txtAlias" style="width: 330px; " maxlength="255" value="{ITEM_ALIAS}" title="alias" />                                
                            </div>   


                            <div class="d_divide2"></div>


                            <!--state-->
                            <div style="float: left;">
                                <label class="d_label">Hiển thị</label>
                                <input type="radio" name="rdoState" id="rdoState" value="0"  />
                                <label >Không</label>
                                <input type="radio" name="rdoState" id="rdoState" value="1" checked="checked"  />
                                <label >Có</label>
                            </div>


                            <!-- modified date -->
                            <div style="float: left">
                                <label for="txtModifiedDate" class="d_label" style="width: 100px">Ngày cập nhật</label>
                                <input readonly="true" class="d_text_input" value="{ITEM_MODIFIED_DATE}"  name="txtModifiedDate" id="txtModifiedDate" style="width: 100px;"  />                                
                            </div> 

                        </fieldset>
                    </div> <!-- end left column-->



                    <!--right column-->
                    <div style="width: 48%; float: right; ">

                        <fieldset>
                            <legend>Thuộc tính sản phẩm</legend>
                            <div>
                                <label for="slProperties" class="d_label">Thuộc tính:</label>

                                <select class="d_text_input" name="slProperties" id="slProperties" style="width: 100px;">
                                    <!-- BEGIN:property_list -->
                                    <OPTION value={PROPERTY_ID}>{PROPERTY_NAME}</OPTION>                                            
                                    <!-- END:property_list -->
                                </select>

                                <input class="d_text_input" size="10" type="text" name="txtPropertyValue" id="txtPropertyValue" value="Nhập giá trị" placeholder="Nhập giá trị"  onfocus="$(this).val('')" />
                                <input class="d_button" type="button" name="btAddProperty" id="btAddProperty" value="Thêm" />
                                <input style="float: right" class="d_button" type="button" name="btClearProperty" id="btClearProperty" value="Xóa hết" />
                            </div>

                            <div class="d_divide2"></div>
                            <fieldset>
                                <legend>Danh sách</legend>
                                <div style="height: 100px" id="propertyList">

                                </div>
                            </fieldset>
                        </fieldset>
                    </div> <!-- end right column -->


                </td>            
            </tr>
        </table>


        <table class="adminform">
            <tr>
                <td>
                    <div class="d_divide10"></div>                    
                    <label style="font-weight:bold ">Nội dung mô tả:</label>      
                    <div class="d_divide10"></div>

                    <textarea name="txtDescription" id="txtDescription">{ITEM_DESCRIPTION}</textarea>
                    <script language="javascript" type="text/javascript">
                        CKEDITOR.replace('txtDescription',
                                {
                                    filebrowserBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html',
                                    filebrowserImageBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Images',
                                    filebrowserFlashBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Flash',
                                    height: 150,
                                    toolbarStartupExpanded: false
                                });</script>

                    <div class="d_divide10"></div>
                    <label style="font-weight:bold ">Nội dung chi tiết: </label>    
                    <div class="d_divide10"></div>

                    <textarea name="txtContent" id="txtContent">{ITEM_DETAIL}</textarea>

                    <script language="javascript" type="text/javascript">
                        CKEDITOR.replace('txtContent',
                                {
                                    filebrowserBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html',
                                    filebrowserImageBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Images',
                                    filebrowserFlashBrowseUrl: '../blugin/ckeditor3.6.4/ckfinder/ckfinder.html?type=Flash',
                                    height: 450,
                                    toolbarStartupExpanded: false
                                });
                    </script>                                     

                </td>
            </tr>
        </table>
        <input type="hidden" name="hdProperty" value="" />
        <input type="hidden" name="hdAction" value=""/>
        <!--        <input type="hidden" name="task"/>-->
        <input type="hidden" name="hdItemID" value="{ITEM_ID}"/>
    </form>

</div>
<noscript>
!Cảnh báo! Javascript phải được bật để chạy được các chức năng trong phần Quản trị		</noscript>

<!-- END:main -->